import {designPage, reactive} from "plain-design-composition";
import {Button, Image, ImageUploader} from "../../../../packages";
import {DemoRow} from "../../Demo/DemoRow";
import {$image} from "../../../../packages/components/$image";
import {DemoLine} from "../../Demo/DemoLine";

export const demo1 = designPage(() => {

  const img1 = 'https://img-blog.csdnimg.cn/c63923ea90924234af36aba464dfdfe7.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center';

  return () => (
    <DemoRow title="基本用法">
      <Image src={img1} width={100}/>
    </DemoRow>
  );
});

export const demo2 = designPage(() => {

  const img1 = 'https://img-blog.csdnimg.cn/c63923ea90924234af36aba464dfdfe7.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center';
  const img2 = 'https://img-blog.csdnimg.cn/213fc723bf10438db7a166323438ecb6.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center';
  const img3 = 'https://img-blog.csdnimg.cn/bf0aa67c0efd40d189f0f0005a5e4ced.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center';
  const img4 = 'https://img-blog.csdnimg.cn/b81da61a9bcf4990a732ed631644fe8e.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center';
  const img5 = 'https://img-blog.csdnimg.cn/89b8aacb3b0743dd9ddfD16da8c4ff0b2.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center';

  const showImages = () => {
    $image.preview([img1, img2, img3, img4, img5,]);
  };

  return () => (
    <DemoRow title="手动预览">
      <Button type="primary" label="预览" onClick={showImages}/>
    </DemoRow>
  );
});


export const demo7 = designPage(() => {
  const img1 = 'https://img-blog.csdnimg.cn/c63923ea90924234af36aba464dfdfe7.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21hdGVfZ2U=,size_16,color_FFFFFF,t_70#pic_center';

  const state = reactive({
    uploadConfig: {
      action: 'http://1.116.13.72:7001/saveFile',
      filename: 'file',
      data: {
        headId: '123',
        module: 'single',
        attr1: 'single',
      },
    },
    val: {
      0: img1,
      1: 'error.png',
      2: undefined,
    },
  });
  return () => (
    <DemoRow title={'ImageUploader图片上传'}>
      <DemoLine title={'图片有效'}>
        <ImageUploader v-model={state.val[0]} uploadConfig={state.uploadConfig}/>
      </DemoLine>
      <DemoLine title={'图片无效'}>
        <ImageUploader v-model={state.val[1]} uploadConfig={state.uploadConfig}/>
      </DemoLine>
      <DemoLine title={'上传失败'}>
        <ImageUploader v-model={state.val[2]} uploadConfig={{ action: '', filename: '' }}/>
      </DemoLine>
    </DemoRow>
  );
});
